<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>果之司</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/mobile.css">
    <link rel="stylesheet" href="./css/swiper-bundle.css">
</head>
<body>
<div id="app" class="index-box">
    <!--导航-->
    <div class="nav">
        <div class="container-box">
            <div class="nav-item nav-item-active">
                <a href="">首页</a>
            </div>
            <div class="nav-item">
                <a href="./fruit.html">鲜果中心</a>
            </div>
            <div class="nav-item">
                <a href="">新闻动态</a>
            </div>
            <div class="logo">
                <img src="./images/logo.png" alt="logo">
            </div>
            <div class="nav-item">
                <a href="">关于我们</a>
            </div>
            <div class="nav-item">
                <a href="">种植基地</a>
            </div>
            <div class="nav-item">
                <a href="">联系我们</a>
            </div>
        </div>
    </div>
    <!--移动导航-->
    <div class="mobile-nav">
        <img src="./images/logo-mobile.png" alt="">
        <img id="openNav" src="./images/nav-mobile.png" alt="">
    </div>
    <!--移动导航打开-->
    <div id="navBox" class="nav-box">
        <div id="navMask" class="mask"></div>
        <div class="list">
            <div class="nav-item nav-item-active">
                <a href="">首页</a>
            </div>
            <div class="nav-item">
                <a href="./fruit.html">鲜果中心</a>
            </div>
            <div class="nav-item">
                <a href="">新闻动态</a>
            </div>
            <div class="nav-item">
                <a href="">关于我们</a>
            </div>
            <div class="nav-item">
                <a href="">种植基地</a>
            </div>
            <div class="nav-item">
                <a href="">联系我们</a>
            </div>
        </div>
    </div>
    <!--轮播图-->
    <div class="banner swiper">
        <div class="swiper-wrapper">
            <div style="background-image: url('./images/banner.jpg')" class="swiper-slide">
                <div class="info-box">
                    <h1>新鲜优选,品味生活!</h1>
                    <span>Fresh selection, savor life!</span>
                </div>
            </div>
            <div style="background-image: url('./images/banner2.jpg')" class="swiper-slide">
                <div class="info-box">
                    <h1>新鲜优选,品味生活!</h1>
                    <span>Fresh selection, savor life!</span>
                </div>
            </div>
            <div style="background-image: url('./images/banner3.jpg')" class="swiper-slide">
                <div class="info-box">
                    <h1>新鲜优选,品味生活!</h1>
                    <span>Fresh selection, savor life!</span>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!--关于我们-->
    <div class="about-us">
        <div class="header-box fade-left">
            <img src="./images/logo2.png" alt="">
            <span>关于我们</span>
        </div>
        <div class="content-box fade-right">
            <span>成立于2004年，是全国领先、高速增长的多品牌鲜果集团，集团拥有全资及控股子公司25家，境内外上市公司6家，业务遍及全国各省(自治直辖市),在世界20多个国家(地区)建立了分支机构或基地，与30多个国家(地区)保持经贸往来。主要专注于高品质国产水果，次要专注于高端进口水果的全产业链运营，通过“精准快”的主要570px供应链，将美味优质的鲜果产品从全球各地果园直接送达全国水果零售地。</span>
            <span>果之司集团提供“水果免费送上门”，通过智慧、新鲜、环保、自动的快递服务体验，为水果运输保驾护航，提高寄递效率，让客户不再愁吃不到新鲜的水果，让客户可以享受到更新鲜、更美味的水果。我们始终从源头把关，新鲜、绿色、未然、原生态。好的土壤，好的种植，才会有好的品质，</span>
        </div>
        <div class="btn fade-left"><a href="">更多</a></div>
    </div>
    <!--鲜果中心-->
    <div class="fruit-box">
        <div class="container-box">
            <div class="header-box fade-right">
                <img src="./images/logo2.png" alt="">
                <span>鲜果中心</span>
            </div>
            <div class="fruit-list">
                <div class="item fade-left">
                    <a href="">
                        <img src="./images/nm.png" alt="">
                        <span>柠檬</span>
                    </a>
                </div>
                <div class="item fade-right">
                    <a href="">
                        <img src="./images/bxg.png" alt="">
                        <span>百香果</span>
                    </a>
                </div>
                <div class="item fade-left">
                    <a href="">
                        <img src="./images/cz.png" alt="">
                        <span>橙子</span>
                    </a>
                </div>
                <div class="item fade-right">
                    <a href="">
                        <img src="./images/clz.png" alt="">
                        <span>车厘子</span>
                    </a>
                </div>
                <div class="item fade-left">
                    <a href="">
                        <img src="./images/sz.png" alt="">
                        <span>山竹</span>
                    </a>
                </div>
                <div class="item fade-right">
                    <a href="">
                        <img src="./images/hlg.png" alt="">
                        <span>火龙果</span>
                    </a>
                </div>
            </div>
            <div class="btn fade-left"><a href="">更多</a></div>
        </div>
    </div>
    <!--种植基地-->
    <div class="plant-box">
        <div class="container-box">
            <div class="header-box fade-left">
                <img src="./images/logo2.png" alt="">
                <span>种植基地</span>
            </div>
            <div class="plant-item ">
                <img class="fade-right" src="./images/p.png" alt="">
                <div class="item-content fade-left">
                    <div class="item-content-desc">
                        <img src="./images/earth.png" alt="">
                        <div>
                            <span>土地资源丰富</span>
                            <span>自身土地的生长环境造就的美味，生态有机肥，有利于生长。</span>
                        </div>
                    </div>
                    <div class="item-content-desc">
                        <img src="./images/plant.png" alt="">
                        <div>
                            <span>科学种植</span>
                            <span>先进的滴灌技术，防虫人工套袋，太阳能物理驱虫,只为更绿色。</span>
                        </div>
                    </div>
                    <div class="item-content-desc">
                        <img src="./images/weather.png" alt="">
                        <div>
                            <span>气候条件优越</span>
                            <span>温带大陆性气候的地区，水果的种类比较丰富。</span>
                        </div>
                    </div>
                    <div class="item-content-desc">
                        <img src="./images/not.png" alt="">
                        <div>
                            <span>无化肥、无农药</span>
                            <span>施用生态有机肥，采用生物防治方法，不含任何农药。</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plant-item ">
                <img class="fade-left" style="margin-left: auto;" src="./images/p2.png" alt="">
                <div style="left: 70px" class="item-content fade-right">
                    <div class="item-content-desc">
                        <img src="./images/ctr.png" alt="">
                        <div>
                            <span>纯天然</span>
                            <span>水果完全在自然环境中生长，不添加任何人工合成物质。</span>
                        </div>
                    </div>
                    <div class="item-content-desc">
                        <img src="./images/gpz.png" alt="">
                        <div>
                            <span>高品质</span>
                            <span>采用了环保的种植方式，让水果具有更高的品质和更好的口感。</span>
                        </div>
                    </div>
                    <div class="item-content-desc">
                        <img src="./images/health.png" alt="">
                        <div>
                            <span>健康安全</span>
                            <span>无化肥无农药的种植方式保证了水果的健康安全。</span>
                        </div>
                    </div>
                    <div class="item-content-desc">
                        <img src="./images/value.png" alt="">
                        <div>
                            <span>营养价值</span>
                            <span>其“营养价值极高”，适合作为健康饮食的选择。</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="btn fade-right"><a href="">更多</a></div>
        </div>

    </div>
    <!--新闻动态-->
    <div class="news-box">
        <div class="container-box">
            <div class="header-box fade-left">
                <img src="./images/logo2.png" alt="">
                <span>新闻动态</span>
            </div>
            <div class="news-list">
                <div class="item fade-right">
                    <img src="./images/p3.png" alt="">
                    <div>
                        <span>果之司无籽石榴上市！</span>
                        <span>2024-7-19</span>
                        <span>以往石榴多于8月上市，今年普遍提早，本周已陆 续到货。因上市较早，目前外观色泽仍较浅，但不 影响石榴口感......</span>
                    </div>

                </div>
                <div class="item fade-left">
                    <img src="./images/p4.png" alt="">
                    <div>
                        <span>2024年亚洲国际果蔬展览会即将开幕！</span>
                        <span>2024-7-19</span>
                        <span>已有来自38个国家和地区的600多家参展商报名参 展，将在享誉盛名的亚洲新鲜果蔬展览会上展示其 产品和服务......</span>
                    </div>
                </div>
                <div class="item fade-right">
                    <img src="./images/p5.png" alt="">
                    <div>
                        <span>果之司今年柿子迎来史上最高纪录！</span>
                        <span>2024-7-19</span>
                        <span>今年的花期令人难以置信，花期是 25 年来最好的，柿子出口量增加了 30% 至 40%，深受顾客喜欢。这也是果之司成立以来柿子售卖的最高纪录......</span>
                    </div>
                </div>
            </div>
            <div class="btn fade-left"><a href="">更多</a></div>
        </div>
    </div>
    <!--联系我们-->
    <div class="concat-box">
        <h1 class="fade-right">我们精挑细选只为了品质</h1>
        <h2 class="fade-left">我们始终从源头把关，新鲜、绿色、天然、原生态。好的土壤，好的种植，才会有
            好的品质。让客户可以享受到更健康、更新鲜、更美味的水果。</h2>
        <span class="fade-right">900-000-000</span>
        <div class="fade-left"><a href="">联系我们</a></div>
    </div>
    <!--底部 end-->
    <div class="footer-box">
        <img class="fade-right" src="./images/logo.png" alt="">
        <span class="fade-left">注：图片均来源于互联网</span>
        <span class="fade-right">地址：广西南宁市西乡塘区罗文大道33号</span>
        <span class="fade-left">COPYRIGHT © 果之司 | 数媒2202黄少玲 设计与制作版权所有</span>
    </div>
</div>
<script src="./javascript/swiper-bundle.js"></script>
<script src="./javascript/rem.js"></script>
<script>
    const maskEle = document.getElementById('navMask');
    const navBoxEle = document.getElementById('navBox');
    document.getElementById('openNav').addEventListener('click', function () {
        navBoxEle.style.right = '0';
        setTimeout(() => {
            maskEle.style.opacity = '1';
        }, 300)
    });
    maskEle.addEventListener('click', function () {
        maskEle.style.opacity = '0';
        setTimeout(() => {
            navBoxEle.style.right = '-100%';
        }, 300)
    });


    /*banner*/
    new Swiper('.banner', {
        autoplay: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

    const allFadeLeft = document.querySelectorAll('.fade-left');
    const allFadeRight = document.querySelectorAll('.fade-right');

    // 定义一个函数，用于监听多个元素是否在窗口底部出现
    function listenElementsBottomAppearance(elements, threshold, type) {
        if (!elements || elements.length === 0) {
            return;
        }

        function foreachEle() {
            elements.forEach(function (element) {
                let elementRect = element.getBoundingClientRect();
                let elementBottom = elementRect.bottom;
                let viewportHeight = window.innerHeight;

                // 如果元素底部接近或超过视口底部指定的阈值
                if (elementBottom - threshold <= viewportHeight) {
                    // 执行回调函数，通知元素已经在视口底部附近
                    element.style.transform = 'translateX(0)';
                } else if (elementBottom >= viewportHeight + 500) {

                    element.style.transform = (type == 1 ? 'translateX(-300%)' : 'translateX(300%)');

                }
            });
        }

        //页面加载完成
        window.addEventListener('load', foreachEle)
        // 监听窗口滚动事件
        window.addEventListener('scroll', foreachEle);
    }

    // 调用函数进行监听
    listenElementsBottomAppearance(allFadeLeft, 200, 1);
    listenElementsBottomAppearance(allFadeRight, 200, 2);

</script>
</body>
</html>
